<template>
  <div class="app-container">
    待处理消息：
    <el-badge :value="12" class="item">
      <el-button size="small">待处理</el-button>
    </el-badge>
    <el-badge :value="3" class="item">
      <el-button size="small">处理中</el-button>
    </el-badge>
    <el-badge :value="2" class="item" type="warning">
      <el-button size="small">回复</el-button>
    </el-badge>

    <el-dropdown trigger="click">
    <span class="el-dropdown-link">
      点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
    </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item class="clearfix">
          评论
          <el-badge class="mark" :value="12" />
        </el-dropdown-item>
        <el-dropdown-item class="clearfix">
          回复
          <el-badge class="mark" :value="3" />
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <hr style="border: solid #909399; margin-top: 20px; margin-bottom: 20px">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="conditionQuery.name" placeholder="公司名称"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="conditionQuery.area" clearable placeholder="所属地区">
          <el-option :value="1" label="昆明"/>
          <el-option :value="2" label="宣威"/>
        </el-select>
      </el-form-item>

      <el-form-item label="时间段">
        <el-date-picker
          v-model="conditionQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="conditionQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <el-table
      :data="tableData"
      :cell-style="cellStyle"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand" label-width="100%">
            <el-form-item label="工厂详细地址" >
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <br>
            <el-form-item label="联系方式" >
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <br>
            <el-form-item label="问题描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="设备编号"
        prop="id">
      </el-table-column>
      <el-table-column
        label="所属地区"
        prop="area">
      </el-table-column>
      <el-table-column
        label="所属工厂"
        prop="factory">
      </el-table-column>
      <el-table-column
        label="反馈日期"
        prop="date">
      </el-table-column>
      <el-table-column
        label="反馈人"
        prop="person">
      </el-table-column>
      <el-table-column
        label="状态"
        prop="status">
      </el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-phone-outline" @click="openComments()" round>处理</el-button>
          <!-- scope.row可以获取表格中每一行的数据-->
          <el-button slot="reference" type="info" size="mini" icon="el-icon-error" @click="ignore()" round>忽略</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--点击处理弹出的留言板-->
    <el-dialog title="反馈信息留言" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="100"></el-table-column>
        <el-table-column property="content" label="内容"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="openInnerDialog()">回复</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--点击回复打开内层嵌套的dialog-->
    <el-dialog title="回复留言" :visible.sync="innerDialogTableVisible" append-to-body="true">
      <el-input
        type="textarea"
        placeholder="请输入内容，最多500字"
        v-model="textarea"
        maxlength="500"
        show-word-limit
        resize="none"
        rows="10"
      />

      <el-row style="text-align: right; margin-top: 10px">
        <el-button type="info" size="mini" @click="innerDialogTableVisible = false" plain>取消</el-button>
        <el-button type="success" size="mini" @click="reply()" plain>回复</el-button>
      </el-row>
    </el-dialog>


    <!-- 分页条 -->
    <el-pagination
      :current-page="page"
      :page-size="size"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          area: '昆明市五华区',
          factory: 'aaa水泥厂',
          date: '2021-5-26',
          person: '王小虎',
          status: '处理中',
          address: '云南省昆明市五华区翠湖北路2号',
          phone: '13811111111',
          desc: '你问的这个问题太难着手，水泥生产线是一个系统，包括的设备太多，一时没法回答你，从原料进厂石灰石破碎，输送，配料站板喂机，计量系统，到生料粉磨，生料粉磨现在一般都用立式辊磨，附属设备很多，经常出现的情况也很多，我所在的厂用的德国Polisicus磨，收尘，入生料库，不说了，说起来像是生产流程了，我加你为好友了，有机会特事特办性质的针对某一设备来切磋交流吧，设备太多，出现的故障说一遍，一天也打不完。'
        }, {
          id: '12987122',
          area: '昆明市五华区',
          factory: 'aaa水泥厂',
          date: '2021-5-26',
          person: '王小虎',
          status: '待处理',
          address: '云南省昆明市五华区翠湖北路2号',
          phone: '13811111111',
          desc: '你问的这个问题太难着手，水泥生产线是一个系统，包括的设备太多，一时没法回答你，从原料进厂石灰石破碎，输送，配料站板喂机，计量系统，到生料粉磨，生料粉磨现在一般都用立式辊磨，附属设备很多，经常出现的情况也很多，我所在的厂用的德国Polisicus磨，收尘，入生料库，不说了，说起来像是生产流程了，我加你为好友了，有机会特事特办性质的针对某一设备来切磋交流吧，设备太多，出现的故障说一遍，一天也打不完。'
        }, {
          id: '12987122',
          area: '昆明市五华区',
          factory: 'aaa水泥厂',
          date: '2021-5-26',
          person: '王小虎',
          status: '已完成',
          address: '云南省昆明市五华区翠湖北路2号',
          phone: '13811111111',
          desc: '你问的这个问题太难着手，水泥生产线是一个系统，包括的设备太多，一时没法回答你，从原料进厂石灰石破碎，输送，配料站板喂机，计量系统，到生料粉磨，生料粉磨现在一般都用立式辊磨，附属设备很多，经常出现的情况也很多，我所在的厂用的德国Polisicus磨，收尘，入生料库，不说了，说起来像是生产流程了，我加你为好友了，有机会特事特办性质的针对某一设备来切磋交流吧，设备太多，出现的故障说一遍，一天也打不完。'
        }, {
          id: '12987122',
          area: '昆明市五华区',
          factory: 'aaa水泥厂',
          date: '2021-5-26',
          person: '王小虎',
          status: '待处理',
          address: '云南省昆明市五华区翠湖北路2号',
          phone: '13811111111',
          desc: '你问的这个问题太难着手，水泥生产线是一个系统，包括的设备太多，一时没法回答你，从原料进厂石灰石破碎，输送，配料站板喂机，计量系统，到生料粉磨，生料粉磨现在一般都用立式辊磨，附属设备很多，经常出现的情况也很多，我所在的厂用的德国Polisicus磨，收尘，入生料库，不说了，说起来像是生产流程了，我加你为好友了，有机会特事特办性质的针对某一设备来切磋交流吧，设备太多，出现的故障说一遍，一天也打不完。'
        }],
        gridData: [{
          date: '2021-5-26 10:38:12',
          name: '张三（我）',
          content: '这个应该这样处理......'
        }, {
          date: '2021-5-26 10:40:55',
          name: '王小虎',
          content: '我还是搞不明白'
        }, {
          date: '2021-5-26 11:00:12',
          name: '王小虎',
          content: '是不是这样？'
        }, {
          date: '2021-5-27 10:38:12',
          name: '张三（我）',
          content: '嗯，按照这个方式去弄就可以，实在不行我们派人过去现场维修'
        }],
        dialogTableVisible: false,
        innerDialogTableVisible: false,
        page: 1,//当前页
        size: 10,//每页显示的记录数
        total: 12345,//总记录数
        conditionQuery: {},//条件查询对象
        textarea: ''
      }
    },
    created() {
      //页面初始化之前调用
    },
    methods: {
      //回复留言方法
      reply() {
        //提示回复留言成功
        this.$message({
          message: '回复留言成功！',
          type: 'success'
        });
        this.innerDialogTableVisible = false
      },
      //打开回复留言对话框
      openInnerDialog() {
        this.innerDialogTableVisible = true
      },
      //打开处理消息对话框
      openComments() {
        this.dialogTableVisible = true
      },
      //忽略反馈信息
      ignore() {
        this.$confirm('是否忽略这条反馈信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {//点击确定进入此方法
          //调用后端接口执行删除操作

        }).catch(() => {//点击取消进入此方法
          // this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          // });
        });
      },
      //更改状态字体样式
      cellStyle({ row, column, rowIndex, columnIndex }) {
        // 状态列字体颜色
        if (row.status === '处理中' && columnIndex === 6) {
          return 'color: #0CB618'
        } else if (row.status === '待处理' && columnIndex === 6) {
          return 'color: #EA1B29'
        } else {
          return 'color: #1a1a1b'
        }
      },
    }
  }
</script>

<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
